<template>
<div class="nav-menu">
  <div class="logo">
    <img class="img" src="@/assets/logo.svg">
    <h2 class="title" v-show="!isCollapse">后台管理系统</h2>
    <!-- 折叠时隐藏标题 即！isCollapse时，h2.title展开元素显示（也就是后台管理系统这个大标题）-->
  </div>
  <div class="menu">
<!--    :collapse="isCollapse"意思是只隐藏侧边栏菜单项的文字，即（首页、用户管理等）-->
    <el-menu
      active-text-color="#409EFF"
      background-color="rgb(48, 65, 86)"
      :default-active=$route.path
      text-color="#C0C4CC"
      :collapse="isCollapse"
      router
    >

      <el-menu-item index="/dashboard">
        <el-icon><House /></el-icon>
        <template #title>首页</template>
      </el-menu-item>


      <el-sub-menu v-for="menu in menus" :index="menu.menuId+''">
        <template #title>
          <el-icon>
            <component :is="menu.icon"></component>
          </el-icon>
          <span>{{menu.menuName}}</span>
        </template>
        <el-menu-item v-for="subMenu in menu.subMenus" :index="subMenu.path">
          <template #title>
            <el-icon>
              <component :is="subMenu.icon"></component>
            </el-icon>
            <span>{{subMenu.menuName}}</span>
          </template>
        </el-menu-item>
      </el-sub-menu>

      <el-menu-item index="/seal">
        <template #title>
          <el-icon><DocumentChecked /></el-icon>
          <span>用章管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/contract1">
        <template #title>
          <el-icon><DocumentChecked /></el-icon>
          <span>合同查询</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/cancel">
        <template #title>
          <el-icon><DocumentChecked /></el-icon>
          <span>合同注销</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/query">
        <template #title>
          <el-icon><DocumentChecked /></el-icon>
          <span>案件管理</span>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</div>
</template>

<script setup lang="ts">
import {defineProps, onMounted, reactive, watch} from 'vue'
import {fetchMenusByUserId} from '@/api/menu'
import {ElMessage} from "element-plus";
import useLoginStore from "@/stores/login";



const loginStore = useLoginStore()
let menus = reactive([])

//生命周期钩子函数，无需触发，页面挂载后直接触发
onMounted(()=>{
  getMenusByUserId(loginStore.id);
})


const getMenusByUserId=(userId:number)=>{
  //调用axios获取当前用户所拥有的菜单权限
  fetchMenusByUserId(userId).then(res=>{
    //浅拷贝
    menus.length=0;
    menus.push(...res.data)

  }).catch(e=>{
    ElMessage.error(e.message||'获取菜单失败')
  })
}


watch(() => loginStore.menuRefreshFlag, () => {
  getMenusByUserId(loginStore.id)
})

defineProps({
  //接收父组件传来的isCollapse
  "isCollapse":{
    type:Boolean,
    default:false
  }


})


</script>

<style scoped>
.el-menu {
  border-right: none;/*折叠的时候右边的线条去掉*/
  /*user-select: none;!*用户禁止选中文本内容*!*/
}
.nav-menu {
  height: 100%;
  background-color: rgb(48, 65, 86); /* 若依左侧主背景色 */
  color: #fff;
}
.logo {
  display: flex;
  height: 60px; /* 若依风格logo栏高度 */
  padding: 0 15px;
  align-items: center;
  border-bottom: 1px solid #1890ff1a; /* 若依logo栏底部浅色边框 */
  background-color: rgb(48, 65, 86)
}
.img {
  height: 32px; /* 若依风格logo大小 */
  margin-right: 10px;
}
.title {
  font-size: 18px;
  font-weight: 500;
  color: #fff; /* 若依logo文字白色 */
  white-space: nowrap;
}
.el-sub-menu .el-menu-item {
  padding-left: 30px !important; /* 子菜单缩进更符合若依风格 */
  background-color: #1f2d3d; /*二级菜单的背景颜色*/
}
.el-sub-menu .el-menu-item:hover {
  background-color: #001529;/*鼠标悬停到二级菜单上的背景颜色*/
}
/*.el-menu-item.is-active {
  background-color: #1890ff1a !important; !* 激活项背景色 *!
}*/
</style>
